<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title></title>
    <link rel="stylesheet" type="text/css" href="/static/css/icon.css"/>
    <link rel="stylesheet" type="text/css" href="/static/css/weui.css"/>
    <link rel="stylesheet" type="text/css" href="/static/css/weui2.css"/>
    <link rel="stylesheet" type="text/css" href="/static/css/style.css"/>
    <script src="/static/js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
    <script src="/static/js/zepto.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="/static/js/picker.js" type="text/javascript" charset="utf-8"></script>
    <script src="/static/js/vue.js" type="text/javascript" charset="utf-8"></script>
    <script src="/static/js/all.js" type="text/javascript" charset="utf-8"></script>
</head>
<body class="white">
<div id="content">

    <div class="topBox">
        <div class="top">
            <div class="sign"><img src="/static/img/paid.png"/></div>
            <div class="title">
                <p class="smallTitle">当日营业总额: <span class="redWord">¥ {{ today_sale }}</span> 上周同日: <span
                        class="blackWord">¥  {{ lastweek_sale }}</span></p>
            </div>
        </div>
        <div class="scroll">
            <div class="data">
                <input class="dataInput" type="text" value="{{ start_date }}" name="date_start" id='date_start'/>
                <input class="dataInput" type="text" value="{{ end_date }}" name="date_end" id='date_end'/>
            </div>
        </div>
    </div>
    <div class="cont">
        <div class="business">
            <dl class="business-item">
                <dt>营业汇总<span class="explain">(营业汇总=菜品销售+服务费=应收总额)</span></dt>
                <dd>
                    <label>菜品销售</label>

                    <p>¥{{ data['营业汇总']['菜品销售'] }}</p>
                </dd>
                <dd>
                    <label>服务费</label>

                    <p>¥{{ data['营业汇总']['服务费'] }}</p>
                </dd>
                <dd>
                    <label>合计</label>

                    <p>¥{{ data['营业汇总']['合计'] }}</p>
                </dd>
            </dl>
            <dl class="business-item">
                <dt>会员</dt>
                <dd>
                    <label>会员充值</label>

                    <p>¥{{ data['会员']['会员充值'] }}</p>
                </dd>
                <dd>
                    <label>会员消费</label>

                    <p>¥{{ data['会员']['会员消费'] }}</p>
                </dd>

            </dl>
            <dl class="business-item">
                <dt>虚收</dt>
                <dd>
                    <label>折扣</label>

                    <p>¥{{ data['虚收']['折扣'] }}</p>
                </dd>
                <dd>
                    <label>促销优惠</label>

                    <p>¥{{ data['虚收']['促销优惠'] }}</p>
                </dd>
                <dd>
                    <label>免单</label>

                    <p>¥{{ data['虚收']['免单'] }}</p>
                </dd>
                <dd>
                    <label>赠送</label>

                    <p>¥{{ data['虚收']['赠送'] }}</p>
                </dd>
                <dd>
                    <label>改价</label>

                    <p>¥{{ data['虚收']['改价'] }}</p>
                </dd>
                <dd>
                    <label>抹零</label>

                    <p>¥{{ data['虚收']['抹零'] }}</p>
                </dd>
                <dd>
                    <label>代金券虚收</label>

                    <p>¥{{ data['虚收']['代金券虚收'] }}</p>
                </dd>
            </dl>
        </div>
    </div>

    <section class="weui-menu">
        <div class="weui-menu-inner now">
            <span>今日</span>
        </div>
        <div class="weui-menu-inner">
            <span>本周</span>
        </div>
        <div class="weui-menu-inner">
            <em></em>
            <span>自定义</span>
            <ul>
                <em></em>
                <li>昨天</li>
                <li>明天</li>
                <li>后天</li>
            </ul>
        </div>
    </section>
</div>
<script>
    $(function () {
        $("#date_start").datetimePicker({
            language: 'zh-CN',
            m: 1,
            autoclose: true,
            startDate: new Date()
        }).on("click", function () {
            $("#date_start").datetimePicker("setEndDate", $("#date_end").val())
        });
        $("#date_end").datetimePicker({
            m: 1,
            language: 'zh-CN',
            autoclose: true,
            startDate: new Date()
        }).on("click", function () {
            $("#date_end").datetimePicker("setStartDate", $("#date_start").val())
        });
        $('.weui-menu-inner').click(function () {
            var $menu = $(this).find('ul'),
                    height = $menu.find('li').length * 40 + 15 + 'px',
                    opacity = $menu.css('opacity');

            $('.weui-menu-inner ul').css({
                'top': '0',
                'opacity': '0'
            });

            if (opacity == 0) {
                $menu.css({
                    'top': '-' + height,
                    'opacity': 1
                });
            } else {
                $menu.css({
                    'top': 0,
                    'opacity': 0
                });
            }
        });
    });

</script>
</body>
</html>
